<template>
  <div class="set">
    <div class="top">
      <HeaderPublc></HeaderPublc>
      <div class="titleBox w" style="margin-top: 20px">
        <div class="left">
          <el-breadcrumb separator-class="el-icon-arrow-right" >
            <el-breadcrumb-item :to="{ path: '/' }"><span style="display:inline;"><img src="../../../../static/img/icon/home.png" style="position: relative;top: 5px"/></span><span class="bread" > 首页: </span> </el-breadcrumb-item>
            <el-breadcrumb-item  ><span class="bread" @click="goChart('searchList')" style="cursor: pointer">搜索列表 </span></el-breadcrumb-item>
            <el-breadcrumb-item><span class="bread" style="color: #0062a2">线路详情</span></el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="main" id="main" >
        <div class="work">
          <el-collapse-transition>
            <div class="banner" id="banner1" @mousewheel="native"   v-show="showBox">
              <Mymap></Mymap>
            </div>
          </el-collapse-transition>
          <div class="searchList" @mousewheel="native2">
            <cent></cent>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
  .searchList{background-color: #fff;width: 100%;min-height: 800px}
  .banner{overflow: hidden;}
  .top{position: fixed;top: 0px;left: 0px;width: 100%;z-index: 111;background-color: #fff;border-bottom: 1px solid #e1e1e1}
  .container{width:  100%;height: auto; background: #ecf0f1;margin-top: 100px;}
  .titleBox{padding:10px 0px ;margin:auto;text-align: left;height: 30px;line-height: 30px;background-color: #fff}
  .bread{line-height: 30px}
  .set{width: 100%;}
  .set .container{width:  100%;height: auto; background: #ecf0f1;margin-top: 100px;}
  .set .container .aside{width: auto;float: left;background: #545c64;margin-right: 20px;}
  footer{width: 100%;clear: both ;}
  .set .container .main{}
  .set .container .show .main{}
  body{background-color:#f7f7f7}
  .work{margin-bottom:20px;background-color:#fff}
  .workTitle{width: 100%;height: 160px;background-color: #429cd5}
  .workTitle p{text-align: center;line-height:160px;color: #fff;font-size: 24px;font-weight: bold}
  p {text-align: left}
</style>
<script>
  import setPublc from '@/components/public/set.vue'
  import HeaderPublc from '@/components/public/herderIndex.vue'
  import Public from '@/vuex/public'
  import cent from '@/components/lanwan/pager/searchChart.vue'
  import map from '@/components/lanwan/pager/map.vue'
  import myfooter from '@/components/public/footer.vue'
  import {mapState, mapActions} from 'vuex'
  export default {
    name: 'my-adminChart',
    data () {
      return {
        activ:true,
        showBox :true
      }
    },
    methods: {
      ...mapActions({

      }),
      saechFn(a){
        var parm = {string:'string'}
        // this.showBizType(parm)
      },
      login () {
        this.$router.push({ name: 'map' })
      },
      native(e){

        if(e.wheelDelta<0&&!e.ctrlKey){
          this.showBox  = false
          setTimeout(function () {
            window.scrollTo(0,0)
          },300)
        // var a =  Public.publicLo.scroll_To(480,function () {
        //   document.getElementById('banner1').style.height= 0;
        //   window.scrollTo(0,0)
        // })
        }
      },
      native2(e){
        var top = document.body.scrollTop||document.documentElement.scrollTop
        if(e.wheelDelta>0&&top==0){
          this.showBox  = true

        }
      },
      goChart(name,id){
        var parm = {
          origin:"",
          dest:"",
          lcl:0
        }

        this.$store.commit('searchParamFn',parm)
        this.$store.commit('transportListTo',null)
        this.$router.push({ name: name,query:{name:this.$route.name}})
      },
    },
    computed: {
      ...mapState([
        'addOderData',
        'updateStatus',
        'language',
        'show'
      ])
    },
    mounted () {
      // var width = document.body.clientWidth;
      // var dom = document.getElementById('main');

      // dom.style = 'max-width:'+ w +'px';


    },
    components: {
      HeaderPublc: HeaderPublc,
      cent: cent,
      myfooter:myfooter,
      Mymap: map
    }
  }
</script>

